<template>
    <div class="ma-content-block p-4">
      <ma-crud :options="crud" :columns="columns" ref="crudRef">

        <!-- 状态列 -->
        <template #status="{ record }">
          <a-switch
              :checked-value="1"
              :unchecked-value="2"
              @change="ChangeStatus($event, record.id)"
              :default-checked="record.status == 1"
          />
        </template>
      </ma-crud>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import api from '@/api/prm/channel.js'
import {Message} from "@arco-design/web-vue";

const crudRef = ref()

const ChangeStatus = async (value, id) => {
  const response = await api.updateByField({ id, value,field:'status' })
  if (response.success) {
    Message.success(response.message)
  }
}

const crud = reactive({
  autoRequest: true,
  api: api.list,
  showIndex: false,
  rowSelection: {showCheckedAll: true},
  operationColumn: true,
  operationColumnWidth: 180,
  add: {show: true, api: api.add},
  edit: {show: true, api: api.update},
  delete: {show: true, api: api.delete},
  formOption: {viewType: 'modal', width: 800},
})

const columns = reactive([
  {title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true},
  {title: '渠道名称', dataIndex: 'name', commonRules: [{required: true, message: '必须填写名称'}]},
  {title: '渠道标识', dataIndex: 'code', formType: 'input', commonRules: [{required: true, message: '必须填写渠道标识'}]},
  {
    title: '启用', dataIndex: 'status', search: false, formType: 'radio',
    dict: {name: 'data_status', props: {label: 'title', value: 'key'}},
    addDefaultValue: 2, width: 120, addDisplay: false
  },
  {title: '创建时间', dataIndex: 'created_at', addDisplay: false, editDisplay: false, search: false},
])

defineExpose({ open })

</script>
